<template>
  <div>
    <LikeDog
      v-for="(item, index) in arr"
      :key="index"
      :dogImgUrl="item.dogImgUrl"
      :dogName="item.dogName"
      @likedog="clickFn"
    />
    <p>显示出喜欢的狗</p>
    <ul>
      <li v-for="(item, index) in likeArr" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import LikeDog from './components/Dog3.vue'
export default {
  data() {
    return {
      arr: [
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=596804413,2766452669&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://img1.baidu.com/it/u=1500983262,2775825516&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=3584021226,4170299245&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=2524788070,524264798&fm=253&fmt=auto&app=138&f=JPEG?w=356&h=392',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=1158414169,2678280907&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=695418473,11748117&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500',
          dogName: '萨摩耶',
        },
      ],
      likeArr: [],
    }
  },
  components: {
    LikeDog,
  },
  methods: {
    clickFn(dogName) {
      this.likeArr.push(dogName)
    },
  },
}
</script>

<style></style>
